<template>
    <el-aside width="1">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="/home"
        text-color="#fff"
        router
        :collapse="props.cos"
      >
        <!-- 一级菜单 -->
        <el-menu-item index="/home">
          <!-- 一节菜单图标 -->
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>首页</span>
        </el-menu-item>
  
        <!-- 一级菜单 -->
        <el-menu-item index="/productAdmin">
          <!-- 一节菜单图标 -->
          <el-icon><icon-menu /></el-icon>
          <!-- 一节菜单标题 -->
          <span>商品管理</span>
        </el-menu-item>
  
        <!-- 二级菜单 -->
        <el-sub-menu index="1">
          <template #title>
            <!-- 二级菜单图标 -->
            <el-icon><location /></el-icon>
            <!-- 二节菜单标题 -->
            <span>用户管理</span>
          </template>
          <!-- sub-menu的子菜单 -->
          <el-menu-item index="/userAdmin">
            <el-icon><icon-menu /></el-icon>
            <!-- 一节菜单标题 -->
            <span>用户列表</span>
          </el-menu-item>
          <el-menu-item index="/userAddAdmin">
            <el-icon><icon-menu /></el-icon>
            <!-- 一节菜单标题 -->
            <span>用户添加</span>
          </el-menu-item>
  
          <!-- sub-menu 再放sub-menu 就是三级菜单 -->
          <!-- <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu> -->
        </el-sub-menu>
  
        <!-- 二级菜单 -->
        <el-sub-menu index="2">
          <template #title>
            <!-- 二级菜单图标 -->
            <!-- elementPlus中图标-现在都是组件 -->
            <!-- <el-icon><Notification /></el-icon> -->
            <el-icon><component :is="'Notification'"></component></el-icon>
            <!-- 二节菜单标题 -->
            <span>通知公告</span>
          </template>
          <!-- sub-menu的子菜单 -->
          <el-menu-item index="/noticeMan">
            <el-icon><icon-menu /></el-icon>
            <!-- 一节菜单标题 -->
            <span>通知公告管理</span>
          </el-menu-item>
          <el-menu-item index="/noticeCateMan">
            <el-icon><icon-menu /></el-icon>
            <!-- 一节菜单标题 -->
            <span>通知公告分类</span>
          </el-menu-item>
  
          <!-- sub-menu 再放sub-menu 就是三级菜单 -->
          <!-- <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu> -->
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </template>
  <script setup lang="ts">
  import { Menu as IconMenu, Location } from '@element-plus/icons-vue'
  import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
  import { defineProps } from 'vue'
  
  const props = defineProps(['cos'])
  </script>
  <style lang="css" scoped>
  .el-menu-vertical-demo {
    height: 100vh;
  }
  </style>
  